<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="flex-clone">
          <span>本月工资金额</span>
          <div>
            <span class="f-24-bo">{{
              shuju == null ? "0" : shuju.totalSalaryThisMonth
            }}</span
            >(元)
          </div>
          <span
            >月同比{{
              shuju == null ? "0" : shuju.employeeGrowthRateYearOnYear
            }}%</span
          >
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-clone">
          <span>本月在职员工</span>
          <div>
            <span class="f-24-bo">{{
              shuju == null ? "0" : shuju.currentEmployeesThisMonth
            }}</span
            >(人)
          </div>
          <span
            >月同比{{
              shuju == null ? "0" : shuju.employeeGrowthRateYearOnYear
            }}%</span
          >
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-clone">
          <span>本月离职员工</span>
          <div>
            <span class="f-24-bo">{{
              shuju == null ? "0" : shuju.leaveEmployeesThisMonth
            }}</span
            >(人)
          </div>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="工资发放总额" name="one">
        <div>
          <elltable
            ref="multipleTable"
            :loading="loading"
            :data="tableData1.list"
            :th="tableData1.fields"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="单票成本" name="two">
        <div>
          <elltable
            ref="multipleTable"
            :loading="loading"
            :data="tableData2.list"
            :th="tableData2.fields"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="岗位人效" name="three">
        <div>
          <elltable
            ref="multipleTable"
            :loading="loading"
            :data="tableData3.list"
            :th="tableData3.fields"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  Getgzffzetable,
  Getdpcbtable,
  Getgwrxtable,
  Getrxtjlist,
} from "@/api/humanEffect";
export default {
  data() {
    return {
      activeName: "one",
      shuju: null,
      loading: false,
      tableData1: { fields: [], list: [] },
      tableData2: { fields: [], list: [] },
      tableData3: { fields: [], list: [] },
      date: "",
    };
  },
  created() {
    const y = new Date().getFullYear();
    const m = new Date().getMonth() + 1;
    const mm = m < 10 ? "0" + m : m;
    this.date = y + "-" + mm;
    this.gettable();
  },

  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    async gettable() {
      this.loading = true;
      const restj = await Getrxtjlist(this.date);
      console.log("统计", restj);
      this.shuju = restj.data;
      const res = await Getgzffzetable();
      this.tableData1 = res.data;
      const res1 = await Getdpcbtable();
      this.tableData2 = res1.data;
      const res2 = await Getgwrxtable();
      this.tableData3 = res2.data;
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-clone {
  display: flex;
  justify-content: space-around;
  // align-items: center;
  height: 80px;
  flex-flow: column;
}

.border-r {
  border-right: 1px solid #d8d8d8;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.f-24-b {
  font-size: 24px;
  color: #2087d0;
}

.f-24-bo {
  font-size: 24px;
  color: #333333;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
